<template>
  <div class="col-sm-12">
    <div class="card-box" style="width: 50%;">
      <el-button size="medium" type="success" @click="addgroup()">+群组</el-button>
      <br>
      <!--       <div style="margin-top: 20px">
           <el-button @click="toggleSelection()">取消选择</el-button>
         </div> -->
      <table class="table">
        <thead>
          <tr>
            <th>群组号</th>
            <th>群组名</th>
            <th style="width:20%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <td>{{item.groupId}}</td>
            <td>{{item.groupName}}</td>
            <td>
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="editGroup(item.groupId)"></el-button>
                <el-popover popper-class="popoverBackB" placement="top" width="50">
                  <div style="text-align: center;">
                    <el-button type="danger" size="mini" @click="deleteGroup(item.groupId)">话说，您确定?</el-button>
                  </div>
                  <el-button size="mini" type="primary" icon="el-icon-delete" slot="reference"></el-button>
                </el-popover>
              </el-button-group>
            </td>
          </tr>
        </tbody>
      </table>
      <div align="center" >
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="parseInt(this.total)">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ps: this.$store.state.permission,
        currentPage: 1, //初始页
        pagesize: 6,
      };
    },
    props: ['data', 'path','total'],
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function(size) {
        this.pagesize = size;
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        this.$parent.loadUsers(this.currentPage,this.pagesize);
      },
      addgroup() {
        this.$router.push({
          path: '/manage/addgroupinfo',
          query: {
            AdminId: this.$store.state.userId,
          }
        });
      },
      editGroup(GroupId) {
        console.log(Number);
        this.$router.push({
          path: '/manage/groupdetailinfo',
          query: {
            GroupId: GroupId,
          }
        });
      },
      deleteGroup(Number) {
        console.log(Number);
          this.$axios.delete('/api/taoyun/v1/Group/DeleteGroup', {
              params: {
                AdminId: this.$store.state.userId,
                GroupId: Number,
              }
            }).then(res => {
              console.log(res);
              this.$notify.success({
                title: '成功',
                message: '删除群组成功，2s后刷新',
              });
              setTimeout(function() {
                location.reload()
              }, 2000)
            })
            .catch(err => {
              console.log(err)
            });
      },
    },
  };
</script>
<style scoped>
  .popoverBackB {
    /* #303133是el-tooltip的背景色 */
    background-color: transparent !important;
  }

  .popoverBackB .popper__arrow::after {
    /* 注意：placement位置不同，下面的属性不同 */
    border-bottom-color: transparent !important;
  }
</style>
